<template>
    <div class="wrapper">
        <el-aside width="200px" class="aside">
            <el-scrollbar>
                <el-menu :default-openeds="['', '']"
                active-text-color="#ffd04b"
                background-color="#545c64"
                text-color="#fff"
                >
                    <el-menu-item index="1">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu index="2" >
                        <template #title >
                            <el-icon id="ceshi">
                                <message />
                            </el-icon>学生管理模块
                        </template>
                        <el-menu-item index="/dashboard/customer">
                            <el-icon><Paperclip /></el-icon>
                            客户管理
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><icon-menu /></el-icon>课程管理模块
                        </template>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>教师管理模块
                        </template>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting, House } from '@element-plus/icons-vue'

import { defineProps } from 'vue';

// 定义接收的 props
const props = defineProps({
  collapse:Boolean // 假设传递的是字符串类型的值
});
const collapse =  ref(props.collapse);

</script>

<style lang="less" scoped>
// #ceshi{
//     color: white;
// }

.wrapper {
    height: 100vh;
    display: flex;

    .aside {
        flex: 1;
        background-color: #545c64;
    }
}


.el-aside {
    color: blue;
    background-color: #304156;
    /* 设置背景颜色 */
}

.el-sub-menu__title {
    color: #fff;
}

.wrapper .el-menu {
    background-color: #304156 !important;

    /* 设置菜单背景颜色 */
    .el-menu-item {
        color: #fff;
    }

    .el-menu-item:hover,
    .el-menu-item-group__title:hover,
    .el-sub-menu__title:hover {
        background-color: #000;
    }
}
</style>


